<template>
    <div class="home-container">
        <!-- 头部start -->
        <div class="header-container">
            <div class="header">
                <div class="nav-container">
                    <div class="nav">
                        <div class="nav-item">
                            <span>首页</span>
                        </div>
                        <div class="nav-item">
                            <span>景点</span>
                        </div>
                        <div class="nav-item">
                            <span @click="travelPath">旅游路线</span>
                        </div>
                        <div class="nav-item">
                            <span @click="login">个人信息</span>
                        </div>
                    </div>
                </div>

                <div class="title">
                    <span>轻松定制旅游路线</span><br>
                    <span>选择地点</span>
                </div>
            </div>
        </div>
        <!-- 头部end -->

        <!-- 内容区start -->
        <div class="content">
            <div class="card">
                <div class="item">
                    <div class="Icon color-1">
                        <i class="el-icon-price-tag"></i>
                    </div>
                    <div class="tag">
                        <span>住宿</span>
                    </div>
                    <div class="descr">
                        <span>
                            提供最新特价酒店、主题酒店、住宿攻略、自由行住宿、自驾游住宿、出游住宿
                        </span>
                    </div>
                </div>
                <div class="item">
                    <div class="Icon color-2">
                        <i class="el-icon-cold-drink"></i>
                    </div>
                    <div class="tag">
                        <span>美食</span>
                    </div>
                    <div class="descr">
                        <span>
                            舌尖上的旅行，不能错过的5个美食之城，市井烟火里难忘的老味道
                        </span>
                    </div>
                </div>
                <div class="item">
                    <div class="Icon color-3">
                        <i class="el-icon-bicycle"></i>
                    </div>
                    <div class="tag">
                        <span>用车</span>
                    </div>
                    <div class="descr">
                        <span>
                            旅游用车必须有相关部门要求的从业资格证、道路运输证、旅游包等
                        </span>
                    </div>
                </div>
                <div class="item">
                    <div class="Icon color-4">
                        <i class="el-icon-s-platform"></i>
                    </div>
                    <div class="tag">
                        <span>娱乐</span>
                    </div>
                    <div class="descr">
                        <span>
                            人生本身就是一场旅行，我们工作、学习、娱乐都是为了让这场人生旅行的过程有意义
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容区end -->

        <!-- 尾部start -->
        <div class="footer">
            <div class="container">
                <div class="left-descr">
                    <span>
                        为您提供全球200多个国家和地区<br><br>
                        多个城市的酒店预订及价格查询服务<br><br>
                        覆盖酒店数超过170万家
                    </span>
                </div>

                <div class="right-tag">
                    <div class="list">
                        <div class="item">
                            <div class="title">
                                <span>旅游资讯</span>
                            </div>
                            <div class="sm-item">
                                <span>旅店索引</span>
                            </div>
                            <div class="sm-item">
                                <span>机票索引</span>
                            </div>
                            <div class="sm-item">
                                <span>攻略索引</span>
                            </div>
                            <div class="sm-item">
                                <span>用车索引</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="title">
                                <span>加盟合作</span>
                            </div>
                            <div class="sm-item">
                                <span>分销联盟</span>
                            </div>
                            <div class="sm-item">
                                <span>代理合作</span>
                            </div>
                            <div class="sm-item">
                                <span>酒店加盟</span>
                            </div>
                            <div class="sm-item">
                                <span>智慧旅行</span>
                            </div>
                        </div>
                        <div class="item">
                            <div class="title">
                                <span>关于我们</span>
                            </div>
                            <div class="sm-item">
                                <span>联系我们</span>
                            </div>
                            <div class="sm-item">
                                <span>隐私政策</span>
                            </div>
                            <div class="sm-item">
                                <span>安全中心</span>
                            </div>
                            <div class="sm-item">
                                <span>用户协议</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="copyRight">
                <span>Copyright©2019-2022, ctrip.com. All rights reserved. | 月薪一万五+</span>
            </div>
        </div>
        <!-- 尾部end -->
    </div>
</template>

<script>
export default {
    name: 'Index',

    data() {
        return {
            
        };
    },

    mounted() {
        
    },

    methods: {
        travelPath(){ 
            this.$router.push({ 
                name:'travelIndex',
            })
        },

        login(){ 
            this.$router.push({ 
                name:'login'
            })
        }
    },
};
</script>

<style lang="less" scoped>
.home-container{ 
    width: 100%;
    height: 100%;
    .header-container{ 
        width: 100%;
        height: 46.875rem;
        background-image: url('../../assets/homeBack.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        .header{ 
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.4);
            .nav-container{ 
                width: 75rem;
                height: 3.125rem;
                margin: 0 auto;
                display: flex;
                justify-content: flex-end;
                padding-top: 3.125rem;
                .nav{ 
                    width: 400px;
                    display: flex;
                    flex-direction: row;
                    .nav-item{ 
                        flex: 1;
                        text-align: center;
                        span{ 
                            color: rgb(255,255,255);
                            font-size: 16px;
                            font-weight: 700;
                        }
                        span:hover{ 
                            cursor: pointer;
                            color: rgb(132, 140, 230);
                        }

                    }
                }
            }

            .title{ 
                width: 75rem;
                height: 18.75rem;
                margin: 0 auto;
                text-align: center;
                padding-top: 12.5rem;
                color: #fff;
                span{ 
                    font-size: 3.75rem;
                    font-weight: 700;
                }
            } 
        }
    }

    .content{ 
        width: 100%;
        height: 31.25rem;
        padding-top: 6.25rem;
        background-color: #F1F8FF;
        .card{ 
            width: 75rem;
            height: 28.125rem;
            margin: 0 auto;
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            .item{ 
                width: 15.625rem;
                height: 20rem;
                margin: 0 .3125rem;
                background-color: #fff;
                .Icon{ 
                    width: 5rem;
                    height: 5rem;
                    margin: 1.5625rem auto;
                    border-radius: 100%;
                    overflow: hidden;
                    text-align: center;
                    color:#fff;
                    i{ 
                        font-size: 1.875rem;
                        padding-top: 1.5625rem;
                    }
                }

                .color-1{ 
                    background-color: #F39C12;
                }

                .color-2{ 
                    background-color: #22A6B3;
                }

                .color-3{ 
                    background-color: #f05942;
                }

                .color-4{ 
                    background-color: #3B3B98;
                }

                .tag{ 
                    width: 13.75rem;
                    height: 3.125rem;
                    text-align: center;
                    margin: 0 auto;
                    font-size: 20px;
                    font-weight: 600;
                }

                .descr{ 
                    width: 13.75rem;
                    height: auto;
                    margin: .625rem auto;
                    text-align: center;

                }
            }
        }

    }

    .footer{ 
        width: 100%;
        height: 21.875rem;
        padding: 7.025rem 0;
        background-color: #211E3B;
        .container{ 
            width: 75rem;
            height: 100%;
            margin: 0 auto;
            display: flex;
            .left-descr{ 
                width: 16.5625rem;
                height: 18.75rem;
                text-align: center;
                font-size: 15px;
                font-weight: 650px;
                color: #fff;
            }
            .right-tag{ 
                width: 59.375rem;
                padding-left: 1.875rem;
                .list{ 
                    display: flex;
                    // border-bottom: 1px solid #555;
                    .item{
                        flex: 1;
                        .title{ 
                            width: 9.375rem;
                            height: 3.125rem;
                            border-bottom: 5px solid #98C6EB;
                            font-size: 1.875rem;
                            font-weight: 700px;
                            color: #fff;
                            margin-bottom: 1.875rem;
                        }

                        .sm-item{ 
                            width: 100px;
                            height: 1.875rem;
                            line-height: 1.875rem;
                            color: rgba(255,255,255,.8);
                            font-size: .9375rem;
                            margin: .9375rem 0;
                        }
                    }
                }
            }
        }

        .copyRight{ 
            width: 100%;
            height: auto;
            border-top: 1px solid #555;
            padding-top: 1.875rem;
            color: #fff;
            text-align: center;
            font-size: 1.125rem;
        }
}
}
</style>